import styled from 'styled-components'
import banner1 from '@/assets/img/banner-1.png'
import banner2 from '@/assets/img/banner-2.png'
import banner3 from '@/assets/img/banner-3.png'
import banner4 from '@/assets/img/banner-4.png'

export const ContentWrapper = styled.div`
    width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 30px;
    .left {
        width: 700px;
        float: left;
    }
    .right {
        width: 380px;
        float: right;
    }
`

export const BoardImg = styled.img.attrs(props => ({
    src: props.imgSrc
  }))`
   width: 300px;
   max-height: 50px;
   border-radius: 4px;
   margin: 0px 40px;
   cursor: pointer;
`

export const RecommendAuthor= styled.div`
    width: 300px;
    margin: 0px 40px;
    .title{
      font-size: 14px;
      margin: 15px 0px;
      overflow: hidden;
      span{
        float: left;
        color: #969696;
      }
      a{
        float: right;
        color: #969696;
       }
    }
    .list{
        padding-left: 0px;
        font-size: 12px;
        li{
            display: flex;
            margin-bottom: 10px;
            .avatar{
                width: 52px;
                height: 52px;
                border-radius: 50%;
                border:1px solid #d3d3d3;
            }
            .main-content{
                flex-grow: 1;
                padding-left: 5px;
                a{
                    font-size: 14px;
                    color: #000000;
                }
                p{
                    color: #969696;
                }
            }
           
            .follow{
               line-height: 52px;
            }
        }
    }
`

export default {
    img:{
        banner1,
        banner2,
        banner3,
        banner4,
    }
}